<template>
	<div class="bili-header">
		<div class="header-bar">
			<ul>
				<li>
					<a href="#">
						<img src="./images/hz_icon.png" alt="bilibili" />
						<div>
							首页
							<i class="iconfont icon-xiangxia"></i>
						</div>
					</a>
				</li>
				<li>
					<a href="#">番剧</a>
				</li>
				<li>
					<a href="#">直播</a>
				</li>
				<li>
					<a href="#">游戏中心</a>
				</li>
				<li>
					<a href="#">会员购</a>
				</li>
				<li>
					<a href="#">漫画</a>
				</li>
				<li>
					<a href="#">赛事</a>
				</li>
			</ul>
			<div>
				<input type="text" placeholder="智商天花板，亦有差距" />
				<span class="iconfont icon-Magnifier"></span>
			</div>
			<ul>
				<li>
					<img
						src="./images/ab7e62e6341b5d94d46deb7a37fb16c15e1c57e8.jpg@240w_240h_1c_1s.webp"
						alt="用户头像"
					/>
				</li>
				<li>
					<span class="iconfont icon-huiyuan"></span>
					<span>大会员</span>
				</li>
				<li>
					<span class="iconfont icon-xiaoxi1"></span>
					<span>消息</span>
				</li>
				<li>
					<span class="iconfont icon-xiaoxi1"></span>
					<span>动态</span>
				</li>
				<li>
					<span class="iconfont icon-xiaoxi1"></span>
					<span>收藏</span>
				</li>
				<li>
					<span class="iconfont icon-xiaoxi1"></span>
					<span>历史</span>
				</li>
				<li>
					<span class="iconfont icon-xiaoxi1"></span>
					<span>创作中心</span>
				</li>
				<li>
					<div>
						<span class="iconfont icon-xiaoxi1"></span>
						<span>投稿</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="header-banner"></div>
		<div class="header-channel"></div>
	</div>
</template>

<script>
export default {
	name: "HeaderComp",
};
</script>

<style lang="less" scoped></style>
